Welcome to HTML Links

Home
Science Department
Health Department
Math Department
Grade 9 Adolescence
Grade 7 Technology
HTML Guide
Javascript
LD Department
Photo Gallery
Links
Contact Me
    HTML Home Tags Tables Forms Frames
    Colours Images, Pictures, and Animations Links Basics Other

    [What are Links?] [Basic Link] [Image Link]
    [Link Border Removal/Enlargement] [Opening in New Windows] [Links and Frames]
    [Base HREF Linking] [Links on Same Page] [Tags and Attributes]

    What are Links?

    Links are what connect the web together. Without them, you would have to tell the person to type in a certain URL in the location bar or put everything on single page. There are 2 types of links: ones that go to an URL or one that goes to an email address.

    The Basic Link

    As you know there are 2 types of links; ones that go to an URL or ones that sends an email. The tag that they use is the <a> tag.

    The format for a URL is:

    <a href="http://www.yoursite.com/">Link Name</a>

    Link Name

    The format for an email link is:

    <a href="mailto:username@provider.com">Email Name</a>

    Email Name

    An Image Link

    The image link is very commom and is, in my opinion, a lot better than the one above. It activates the image the same as it does text, so you do is place the image tag inbetween the <a> and </a> tags. Remember that it is best to match images with the links.

    <a href="http://www.yoursite.com/">
    <img src="    http://www.yoursite.com/yourimage.gif">
    </a>

    <a href="mailto:username@provider.com">
    <img src="    http://www.yoursite.com/yourimage.gif">
    </a>

    Removing/Enlarging the Link Border

    One thing that is very annoying is the link border. You finally get a transparent background and then the border ruins it. Of course, some people like the border and like it thicker.

    The normal thickness of the border is "2".

    <a href="http://www.yoursite.com/">
    <img src="    http://www.yoursite.com/yourimage.gif" border="2">
    </a>

    The thinnest a border can go without removing it is "1".

    <a href="http://www.yoursite.com/">
    <img src="    http://www.yoursite.com/yourimage.gif" border="1">
    </a>

    To remove the border, make the value "0".

    <a href="http://www.yoursite.com/">
    <img src="    http://www.yoursite.com/yourimage.gif" border="0">
    </a>

    To make the border thicker, make the value "3" or higher.

    <a href="http://www.yoursite.com/">
    <img src="    http://www.yoursite.com/yourimage.gif" border="5">
    </a>

    Opening Links in New Windows

    Opening links in new windows is great. When you have a "Links Page", you can let people visit the other sites, without leaving yours. There are 2 ways to do it and both work just fine.

    <a href="http://www.yoursite.com/" target="_blank">New Window 1</a>

    <a href="http://www.yoursite.com/" target="_new">New Window 2</a>

    New Window 1
    New Window 2

    Links and Frames

    This is a very important section for people who use frames. Without out these, you'll have some major problems.

    First is opening a link out of frames. This breaks the link out of your frames.

    <a href="http://www.yoursite.com/" target="_top">Link out of Frames</a>

    Link out of Frames

    This opens a link from one frame to another. It's useful for when you have a navigation bar frame and a main frame page.

    <a href="http://www.yoursite.com/" target="framename">Link from one frame to another</a>

    Link from one frame to another

    Base HREF Linking

    Base HREF linking can save you a lot of time because you don't have to type in the whole address every time. Though if you use "Linking parts of the Same Page" you have to type in the partial address too. So this is a mixed blessing. Remember to place inbetween the <head> and </head>.

    <head>

    <base href="http://www.yoursite.com/">

    </head>

    Linking parts of the Same Page

    Notice at the top and bottom of this page have links that bring to different parts of the page? I love this effect. To get it, there are 2 steps.

    Step 1 is the name the part you want the link to go to. Without the link will be useless.

    <a name="samplename">Sample Name</a>

    Sample Name

    Step 2 is to create the link. It is a bit different from the normal link.

    <a href="#sample">Sample Name</a>

    Sample Name

    NOTE if you are using Base HREF-ing, you must use the full URL minus the base HREF. the link above won't work in this page because of that.

    <a href="/html/links/#sample">Sample Name</a>

    Sample Name

    Link Tags and Attributes

    The following are the link tags and their attributes:

    <a> </a>

    This tag is what makes all links. There are many more attributes than I listed but you probably won't use the others.

    • href="where it goes" : This defines where the link goes. If it is a URL, replace "where it goes" with it. If it is a email link, replace "where it goes" with "mailto:youremail@provider.com".

    • target="_new , _blank , _top , frame_name" : This tells where the link will go. If you used _new or _blank it will open in a new window. If you used _top it will break out of frames. If you used frame_name it will open in the frame called whatever you replace "frame_name" with.

    • name="whatever" : For naming a title as an address so you can bring people to that point without scrolling.

    <base>

    This one anchors all links to another so you do not have to write it all every time. Place it in the <head> and </head> tags.

    • href="whatever" : This defines the link that all links will start with. (You can overide it if you place the FULL URL in; i.e. to another site) Replace "whatever" with your URL.

    [What are Links?] [Basic Link] [Image Link]
    [Link Border Removal/Enlargement] [Opening in New Windows] [Links and Frames]
    [Base HREF Linking] [Links on Same Page] [Tags and Attributes]